<!-- ModalView.vue -->
<template>
  <teleport to="body">
    <div v-if="modelValue" class="modal">
      <div class="modal-background" @click="closeModal">
        <div class="modal-content">
          <slot></slot>
          <!-- 使用插槽传递模态框内容 -->
          <button @click="closeModal">Close Modal</button>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { defineProps } from 'vue'

// 接收外部传入的 prop
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

// 触发关闭模态框的方法
const emit = defineEmits(['update:modelValue'])
const closeModal = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped>
.modal {
  /* ... 模态框样式 ... */
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-background {
  /* ... 模态框背景样式 ... */
  width: 200px;
  height: 200px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
</style>
